<template>
  <div class="charts_shadow" :style="{width:`${innerWidth *.313}px`}">
    <div class="until_title_charts">设备巡检</div>
    <div class="monitor_info" style="width: 100%;height: 80%">
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{deviceInfo.sum }}
        </div>
        <div class="monitor_item_des">完成巡检项</div>
        <div class="monitor_item_rate" style="right: -65px">
          <div class="item_rate_up safe" v-if="deviceInfo.theCountRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(deviceInfo.theCountRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="deviceInfo.theCountRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-deviceInfo.theCountRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{(deviceInfo.theFineshRate * 100).toFixed(0)}}%
        </div>
        <div class="monitor_item_des">巡检完成率</div>
        <div class="monitor_item_rate" >
          <div class="item_rate_up safe" v-if="deviceInfo.beforeAndTheCompareRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(deviceInfo.beforeAndTheCompareRate * 100).toFixed(0)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="deviceInfo.beforeAndTheCompareRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-deviceInfo.beforeAndTheCompareRate * 100).toFixed(0)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{deviceInfo.theProblemCount}}
        </div>
        <div class="monitor_item_des">发现问题数</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up warning" v-if="deviceInfo.theProblemRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(deviceInfo.theProblemRate * 100).toFixed(0)}}%</span>
          </div>
          <div class="item_rate_down safe" v-if="deviceInfo.theProblemRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-deviceInfo.theProblemRate * 100).toFixed(0)}}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'device_inspect',
    mixins: [mixin],
    data () {
      return {
        deviceInfo: {
          sum: 0,
          beforeAndTheCompareRate: 0,
          theCountRate: 0,
          theFineshRate: 0,
          theProblemCount: 0,
          theProblemRate: 0
        }
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser (oldItem, newItem) {
        if (this.currentUser.mid) {
          this.getPatrolNoteStatisticalInfo()
        }
      }
    },
    mounted () {
      this.getPatrolNoteStatisticalInfo()
    },
    methods: {
      getPatrolNoteStatisticalInfo () {
        let data = {
          coId: this.currentUser.coId,
          pjId: this.currentUser.pjId,
          stageId: this.currentUser.stageId,
          mid: this.currentUser.mid,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getPatrolNoteStatisticalInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.success) {
            return
          }
          if (!res.data.data) {
            this.deviceInfo.sum = 0
            this.deviceInfo.beforeAndTheCompareRate = 0
            this.deviceInfo.theCountRate = 0
            this.deviceInfo.theFineshRate = 0
            this.deviceInfo.theProblemCount = 0
            this.deviceInfo.theProblemRate = 0
            return
          }
          let data = res.data.data
          this.deviceInfo.sum = data.sum
          this.deviceInfo.beforeAndTheCompareRate = data.beforeAndTheCompareRate
          this.deviceInfo.theCountRate = data.theCountRate
          this.deviceInfo.theFineshRate = data.theFineshRate
          this.deviceInfo.theProblemCount = data.theProblemCount
          this.deviceInfo.theProblemRate = data.theProblemRate
        })
      }
    }
  }
</script>
